<template>
  <div class="holder">
    <el-row :gutter="20">
      <!-- 左边 -->
      <el-col :xs="24" :sm="8" :lg="4">
        <div class="left">
          <el-input
            placeholder="请输入分类名称"
            v-model="filterText"
            suffix-icon="el-input__icon el-icon-search"
            clearable
          >
          </el-input>
          <el-tree
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            @node-expand="handlerNodeExpand"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>
                <img
                  style="vertical-align: text-top"
                  v-if="data.children.length !== 0"
                  :src="[node.expanded ? treeicon.one : treeicon.two]"
                  alt=""
                />
                <img
                  style="vertical-align: text-top"
                  v-if="data.children.length === 0"
                  :src="treeicon.there"
                  alt=""
                />
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :xs="24" :sm="16" :lg="20">
        <div class="right">
          <div class="addpre">
            <div class="txt">试卷添加</div>
            <el-form
              ref="form"
              :model="addform"
              size="small"
              label-width="80px"
            >
              <el-form-item label="试卷位置">
                <el-input v-model="addform.location"></el-input>
              </el-form-item>
              <el-form-item label="试卷封面">
                <div class="picture">
                  <el-image :src="addform.cover"></el-image>
                  <div class="uppicture">
                    <input
                      type="file"
                      class="upinput"
                      ref="file"
                      @change="showimg"
                    />
                    <i class="el-icon-plus" id="changes" @click="changeimg"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="试卷名称">
                <el-input v-model="addform.name"></el-input>
              </el-form-item>
              <el-form-item label="试卷分数">
                <el-input v-model="addform.grade"></el-input>
              </el-form-item>
              <el-form-item label="试卷时间">
                <el-input v-model="addform.time"></el-input>
              </el-form-item>

              <el-button
                type="primary"
                size="small"
                style="float: right"
                @click="onSubmit"
                >添加试卷</el-button
              >
            </el-form>
            <div class="gradestate">
              当前分数统计
              <p>目前总分{{ currenttotal }}</p>
            </div>
            <el-table
              :data="tableData"
              border
              height="30%"
              stripe
              style="width: 100%"
            >
              <el-table-column
                prop="date"
                label="题型"
                align="center"
                width="110"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="题量"
                align="center"
                width="110"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                align="center"
                label="分数"
                width="125"
              >
              </el-table-column>
            </el-table>
          </div>
          <div class="preface">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="题目列表" name="first">
                <Topicadmin />
              </el-tab-pane>
              <el-tab-pane label="判断题" name="second">
                <Tfquestions />
              </el-tab-pane>
              <el-tab-pane label="填空题" name="third">
                <Gapfilling />
              </el-tab-pane>
              <el-tab-pane label="选择题" name="fourth">
                <Choicequest />
              </el-tab-pane>
              <el-tab-pane label="多选题" name="five">
                <Multiple />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 考试页面 -->
    <!-- <el-dialog title="提示" :visible.sync="testpaper"> 123 </el-dialog> -->
  </div>
</template>

<script>
// 判断题
import Tfquestions from "./components/tfquestions.vue";
// 填空题
import Gapfilling from "./components/gapfilling.vue";
// 选择题
import Choicequest from "./components/choicequest.vue";
// 多选题
import Multiple from "./components/multiple.vue";
// 题目管理
import Topicadmin from "./components/topicadmin.vue";
export default {
  components: {
    Tfquestions,
    Gapfilling,
    Choicequest,
    Multiple,
    Topicadmin,
  },
  data() {
    return {
      currenttotal: 0,
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                  icon: "el-icon-info",
                  children: [],
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  icon: "el-icon-info",
                  children: [],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
              children: [],
            },
            {
              id: 6,
              label: "二级 2-2",
              children: [],
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
              children: [],
            },
            {
              id: 8,
              label: "二级 3-2",
              children: [],
            },
          ],
        },
      ],
      tableData: [
        {
          date: "判断题",
          name: "5",
          address: "25",
        },
        {
          date: "填空题",
          name: "2",
          address: "10",
        },
        {
          date: "选择题",
          name: "2",
          address: "10",
        },
        {
          date: "多选题",
          name: "2",
          address: "10",
        },
      ],
      filterText: "",
      // 分页查询
      pageInfo: {
        // 总条数
        total: 0,
        // 当前页
        pageNo: 1,
        // 每页条数
        pageSize: 15,
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 图标数据
      treeicon: {
        one: require("@/assets/images/空文件.svg"),
        two: require("@/assets/images/文件夹.svg"),
        there: require("@/assets/images/文件.svg"),
      },
      activeName: "first",
      addform: {
        name: "",
        location: "",
        cover: "",
        grade: "",
        time: "",
      },
    };
  },
  watch: {
    // 调用 Tree 实例的filter方法，参数为关键字
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    currenttotal: {
      handler(newvalue) {
        console.log("执行了", newvalue);
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    // 对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点被展开时触发的事件
    handlerNodeExpand(data, node, element) {
      window.console.log(data);
      window.console.log(node);
      window.console.log(element);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 预览图片
    showimg() {
      const that = this;
      console.log(that.$refs.file);
      console.log(that.$refs.file.files[0]);
      var fr = new FileReader();
      fr.readAsDataURL(that.$refs.file.files[0]);
      fr.onload = function () {
        that.addform.cover = fr.result;
      };
    },
    // 更换图片
    changeimg() {
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
    },
    onSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
.holder {
  padding: 20px 25px;
  height: 887px;
  // background-color: skyblue;
  @media screen and (min-height: 950px) and (max-height: 990px) {
    padding: 35px 25px;
  }
  @media screen and (min-height: 1070px) {
    padding: 90px 25px;
  }
  .left {
    height: 848px;
    border: 1px solid #ccc;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px 20px 0;
    ::v-deep .el-input__inner {
      border: 1px solid #1997c9;
      border-radius: 0;
      // color: #fff;
      // background-color: #072a4f;
    }
    ::v-deep .el-tree-node.is-current > .el-tree-node__content {
      // 设置颜色 el-tree 选中节点的颜色
      background-color: rgba(135, 206, 235, 0.2);
      color: #409eff; // 节点的字体颜色
      font-weight: bold; // 字体加粗
    }
    ::v-deep .el-tree-node__content:hover {
      background-color: #66b1ff87;
    }
    ::v-deep .el-tree {
      // background-color: #f2f2f2;
      // color: red;
      margin-top: 30px;
    }
  }
  .right {
    width: 100%;
    height: 848px;
    border: 1px solid #ccc;
    padding: 20px 20px;
    display: flex;
    .addpre {
      // background-color: skyblue;
      width: 350px;
      margin-right: 30px;
      border-right: 1px solid rgb(230, 227, 227 / 0.8);
      box-shadow: 2px 2px 3px 3px rgb(224, 224, 224);
      .txt,
      .gradestate {
        height: 42px;
        line-height: 42px;
        padding-left: 15px;
        border-bottom: 1px solid #ccc;
        font-family: "小宋";
      }
      .el-form {
        margin: 30px 15px 10px 0;
        .el-image {
          width: 120px;
          height: 120px;
          border: 1px solid #ccc;
          margin-right: 10px;
        }
        .picture {
          display: flex;
          justify-content: space-around;
          .uppicture {
            flex: 1;
            position: relative;
            border: 1px solid #ccc;
            input {
              width: 100%;
              height: 100%;
              vertical-align: middle;
              opacity: 0;
            }
            i {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 30px;
            }
          }
        }
      }
      .gradestate {
        border: 1px solid #ccc;
        margin-top: 80px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .preface {
      flex: 1;
      padding: 0px 20px;
      box-shadow: 2px 2px 3px 3px rgb(224, 224, 224);
    }
  }
}
</style>